<!-- 
  修改密码

  通过表单验证来修改密码
-->
<template>
  <div class="main">
    <div class="main-on">
      <div class="changpassword">修改密码</div>
      <div style="margin-top: 20px;">
        <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px"
          class="demo-ruleForm">
          <el-form-item label="旧密码" prop="oldPassword">
            <el-input v-model="ruleForm.oldPassword" type="password" autocomplete="off" />
          </el-form-item>
          <el-form-item label="新密码" prop="newPassword">
            <el-input v-model="ruleForm.newPassword" type="password" autocomplete="off" />
          </el-form-item>
          <el-form-item label="密码确认" prop="checkPassword">
            <el-input v-model="ruleForm.checkPassword" type="password" autocomplete="off" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">修改</el-button>
            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>


<script lang="ts" setup>
import { reactive, ref } from 'vue'
import router from "@/router/index"; //引入路由
import type { FormInstance } from 'element-plus'
import Qs from "qs";
import Cookies from "js-cookie"
import axios from "axios"; //引入axios进行请求数据
import {post} from "@/utils/request";



const ruleFormRef = ref<FormInstance>()
//旧密码
const validatePass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('输入不能为空!'))
  } else {
    callback()
  }
}

//新密码
const checkPass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('输入不能为空!'))
  } else if (value.length < 6) {
    callback(new Error('新密码不能小于6位'))
  } else {
    callback()
  }
}

//密码确认
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('输入不能为空'))
  } else if (value !== ruleForm.newPassword) {
    callback(new Error("两次密码不一致!"))
  } else {
    callback()
  }
}

const ruleForm = reactive({
  oldPassword: '', //旧密码
  newPassword: '',//新密码
  checkPassword: '', //确定二次密码
})

//表单校验
const rules = reactive({
  oldPassword: [{ validator: validatePass, trigger: 'blur' }],
  checkPassword: [{ validator: validatePass2, trigger: 'blur' }],
  newPassword: [{ validator: checkPass, trigger: 'blur' }],
})

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      const data = {
        _gp: 'admin',
        _mt: 'newPassword',
        ...ruleForm
      }
      
      post( data).then((res) => {
        console.log(res);
        let { errno, errmsg } = res.data
        if (200 === errno) {
          ElMessage.success("修改密码" + errmsg)
          Cookies.remove('token')
          router.replace('/')
        } else {
          if (errno != 200) {
            ElMessage.error("原密码错误！")
          }
        }
      })
    } else {
      console.log('error submit!')
      return false
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>

<style lang="less" scoped>
.main {
  height: 100%;
  overflow: hidden;
  // background: #f2f3f5;

  .main-on {
    margin: auto;
    width: 700px;
    margin-top: 20px;
    border: solid 1px #ccc;
    overflow: hidden;
    border-radius: 10px;
    background: white;
    box-shadow: 0px 0px 20px 10px #e0e0e0;

    .changpassword {
      height: 50px;
      line-height: 50px;
      text-indent: 1rem;
      overflow: hidden;
      font-weight: 600;
    }
  }

  .demo-ruleForm {
    width: 640px;
  }
}
</style>